<template>
  <div>
    <Return txt="备忘录" style="background: #eeeeee"></Return>
    <div class="icon">
      <img @click="addTap" src="../../../assets/images/bianji.png" alt="" />
    </div>
    <div class="list">
      <div class="list1">今天</div>
      <div class="list2">
        <img
          class="list2_icon"
          src="../../../../static/images/me/headimg.png"
          alt=""
        />
        <div class="list3">
          <span>希望世间美好与你环环相扣黄23123</span>
          <div class="list4">
            <span>共两张</span>
            <van-icon class="list4_icon" @click="deleteTap" name="minus" />
          </div>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="list1">昨天</div>
      <div class="list2">
        <img
          class="list2_icon"
          src="../../../../static/images/me/headimg.png"
          alt=""
        />
        <div class="list3">
          <span>希望世间美好与你环环相扣黄23123</span>
          <div class="list4">
            <span>共两张</span>
            <van-icon class="list4_icon" @click="deleteTap" name="minus" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Return from "../../../components/return";
import { Dialog } from "vant";
export default {
  components: {
    Return,
  },
  data() {
    return {};
  },
  methods: {
    deleteTap() {
      Dialog.confirm({
        title: "",
        message: "是否删除",
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    addTap(){
        this.$router.push('/beiwangadd');
    }
  },
};
</script>
<style scoped>
.icon {
  height: 120px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 5px solid #eee;
}
.icon img {
  width: 80px;
  height: 80px;
}
.list {
  width: 90%;
  margin-left: 2%;
  display: flex;
  align-items: center;
  height: 70px;
  margin-top: 20px;
}
.list1 {
  width: 15%;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.list2 {
  display: flex;
  align-items: center;
  margin-left: 2%;
}
.list3 {
  margin-left: 2%;
}
.list4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list4_icon {
  padding: 1px;
  color: #bfbfbf;
  font-size: 15px;
  border: 1px solid #bfbfbf;
  border-radius: 50%;
}
.list2_icon {
  width: 70px;
  height: 70px;
  border-radius: 5px;
}
</style>